<template>
	<view class="big-box flex-col align-center">
		<top-navigation bgColor='#FFFFFF00' :isBack="true">
			<!-- <text slot='center-slot' class="center-slot"></text> -->
			<view slot='center-slot' class="center-slot" @tap="">
				搜索好友
			</view>
		</top-navigation>
		<u-toast ref="uToast"></u-toast>
		<view class="no-data-box flex-col justify-center align-center" v-if="!eggInfoList.length">
			<image class="no-data" src="/static/images/no-datapng.png" mode=""></image>
			暂无数据
		</view>

		<view class="content">
			<view class="tab justify-center align-center">
				<!-- <view class="tab-item" @tap="collectShow=!collectShow">
					{{collectName}}(1)
					<image class="cai-ji" :style="{transform:`rotate(${collectShow?'180deg':'0deg'})`}"
						src="/static/images/starmap/caiji-d.png" mode=""></image>
				</view> -->
				<input class="search-input" type="text" @input="oninput" placeholder="请输入对方的ID/昵称" 
				placeholder-class="placeholder-class"
				/>
			</view>
			<view class="select-box justify-between">
				<view class="select-l" @tap="collectShow=!collectShow">
					{{collectName}}<image class="cai-ji" :style="{transform:`rotate(${collectShow?'180deg':'0deg'})`}"
						src="/static/images/starmap/caiji-d.png" mode=""></image>
				</view>
				<!-- <view class="select-r justify-start align-center" :style="{color:order!=0?'#27ff92':'#FFFFFF99'}"
					@tap="orderSelect">
					已为我采集
					<image class="sort-icon" :src="`/static/images/starmap/sort-icon${orderToggleList[order].src}.svg`"
						mode=""></image>
				</view> -->
			</view>
			<!-- <view class="content-box justify-between align-center" v-for="v,k in eggInfoList" :key="k"> -->
			<view class="content-box justify-between align-center" v-for="v,k in friendList" :key="k">
				<view class="justify-start align-center">
					<!-- :style="{background:`url('/static/images/starmap/longdan-bg.png') no-repeat center center / 100% 100%`}" -->
					<view class="longdan-box justify-center align-center">
						<!-- <image class="longdan" src="/static/images/starmap/longdan.png" mode="widthFix"></image> -->
						<image class="longdan" :src="v.avatar" mode=""></image>
					</view>
					<view class="title">
						{{v.nickname}}
						<view class="time">
							ID:{{v.code}}
						</view>
					</view>
				</view>
				<view class="title flex-col align-end">
					<view class="justify-start align-center">
						<image class="kuangshi-icon" src="/static/images/starmap/shuijingb.png" mode=""></image>
						{{v.number}}
					</view>
					<view class="time">
						{{v.ctime_text}}
					</view>
				</view>

			</view>
		</view>

		<u-picker
		 cancelColor='#8e929d' confirmColor='#0AFE8C' closeOnClickOverlay
		 
		 :defaultIndex="[Number(team)]"
		 :show="collectShow" :columns="getCollectList" @close='collectShow=false' @cancel='collectShow=false'
			@confirm='collectConfirm' keyName="label"></u-picker>
		<!-- 联系客服弹出层-->
		<u-popup :show="moneyShow" mode="center" @close="moneyShow=false" round="16rpx" bgColor='transparent'
			overlayOpacity='0.85'>
			<view class="popup-one-box flex-col align-center">
				<image class="popup-top-bg" src="/static/images/starmap/popup_top-bg.png" mode=""></image>
				<view class="popup-top-gaoji">
					<image class="gao-ji" src="/static/images/starmap/high-map.png" mode=""></image>
				</view>
				<view class="has-shuijing justify-start">
					拥有钻石: <text class="shui-ji-num">0</text> 个
				</view>
				<view class="need-kuang justify-between align-center">
					<view class="need-shuijing">
						需消耗的钻石
					</view>
					<view class="need-shuijing-num justify-start align-center">
						<image class="popup-kuangshi" src="/static/images/starmap/kuangshi.png" mode=""></image>
						100
					</view>
				</view>
				<view class="popup-box-btn align-center justify-center" @click="openMap">
					{{'开启地图'}}
				</view>
				<view class="popup-box-cancel align-center justify-center" @click="moneyShow=false">
					<image class="close-popup" src="/static/images/starmap/close.svg" mode=""></image>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { collectList } from '@/utils/constants.js'
	export default {

		data() {
			return {
				collectName: '采集一队',
				collectShow: false, //采集队伍
				collectList,
				page: 1,
				pagesize: 0,
				totalpage: 0,
				loading: false,
				current: 0,
				moneyShow: false,
				eggInfoList: [

				],
				team: 1,
				appList: [

				],
				friendList:[],
				orderToggleList: [{
						label: '默认',
						val: 0,
						src: ''
					},
					{
						label: '升序',
						val: 1,
						src: 't'
					},
					{
						label: '降序',
						val: 2,
						src: 'd'
					},
				],
				order: 0,
				collectNum:0


			}
		},
		onLoad(o) {
			if(o.num){
				this.team = o.num
				console.log(this.collectList[0][Number(this.team)-1].label,'this.collectList[Number(this.team)-1].label');
				this.collectName = this.collectList[0][Number(this.team)-1].label
				this.collectNum = o.collectNum
			}
			this.getIndex()
		},
		computed:{
			getCollectList(){
				return [
					[...this.collectList[0].slice(0,Number(this.collectNum) || 1)]
				]
			}
		},
		onReachBottom() {
			let reach = Number(this.page) >= Number(this.totalpage)
			if (!reach) {
				this.loading = true
				//当前条数小于总条数 则增加请求页数
				this.page++;
				this.getIndex(e) //调用加载数据方法
			} else {
				console.log('已加载全部数据')
			}
		},
		methods: {
			oninput(e){
				console.log(e.detail.value,'搜索');
				uni.showLoading({
					title:'搜索中'
				})
				let word = e.detail.value
				this.friendList = this.eggInfoList.filter(item => item.nickname.indexOf(word) > -1 || item.code.indexOf(word) > -1);
				uni.hideLoading()
			},
			collectConfirm(e) {
				console.log('confirm', e)
				this.team = e.value[0].team
				this.collectName = e.value[0].label
				this.collectShow = false
				this.getIndex()
			},
			orderSelect() {
				if (this.order == 0) {
					// 切换
					this.order = this.orderToggleList[this.order + 1].val
				} else if (this.order == 1) {
					this.order = this.orderToggleList[this.order + 1].val
				} else if (this.order == 2) {
					this.order = 0
				}
			},
			// 采集队伍记录
			async getIndex(e) {
				let url = '/api/v1/team_list'
				let {
					code,
					msg,
					data
				} = await this.$getRequest(url, {
					page: this.page,
					team: this.team,
					order: this.order,
				})
				if (code == 200) {
					console.log(data, '静态资源');
					if (e) {
						// this.status = 'loadmore'
						this.eggInfoList = [...this.eggInfoList, ...data.list]
						this.friendList = this.eggInfoList
					} else {
						this.eggInfoList = data.list
						this.friendList = this.eggInfoList
					}
					this.page = data.page //"1",/
					this.pagesize = data.pagesize //"20",
					this.totalpage = data.totalpage //"1"

				} else {
					this.$refs.uToast.show({
						message: msg
					})
				}
				this.loading = false
			},
			myCopy(value) {
				let _this = this
				//提示模板
				uni.setClipboardData({
					data: value, //要被复制的内容
					showToast: false,
					success: () => { //复制成功的回调函数
						_this.$refs.uToast.show({
							message: '已复制',
							type: 'default',
							duration: '500'

						})
						// uni.showToast({ //提示
						// 	title: wxorqq == 'w' ? "微信号已复制" : 'QQ号已复制'
						// })
					}
				});
			},
			bannerTap() {
				// banner点击
			},
			bannerChange() {
				// banner改变
			},
			featureTap(e) {
				this.moneyShow = true
			}
		}
	}
</script>
<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	/deep/.u-picker{
		// background: #000;
		color: #FFF;
		
	}
	/deep/.uni-picker-view-mask{
		background:  #21202e;
		z-index: -1;
		color: #FFF;
	}
	/deep/.u-picker__view__column__item{
		// background: #000;
		position: relative;
		z-index: 10000;
		color: #0AFE8C !important;
	}
	/deep/ .uni-picker-view-indicator{
		&::before{
			 //    color: #171722;
				// border-bottom: 1px solid #171722;
		}
		&::after{
			 //    color: #171722;
				// border-bottom: 1px solid #171722;
		}
	}
	.big-box {
		min-height: 100vh;
		background: #16161e;
		padding: 0rpx 40rpx 60rpx;

		.content {
			width: 100%;
			color: #FFF;
			padding: 50rpx 0rpx;

			.tab {
				width: 670rpx;
				height: 90rpx;
				background: #20202c;
				border-radius: 16rpx;
				.search-input{
					width: 100%;
					text-align: center;
				}
				.placeholder-class{
					line-height: 1.5;
					font-size: 28rpx;
					&::before{
						content: "";
						    display: inline-block;
						    width: 1.125rem;
						    height: 1.125rem;
						    background: url() no-repeat;
						    background-size: 100% 100%;
						    transform: translate(-20%,25%);
					}
				}

				.cai-ji {
					transition: all .5s;
					margin-left: 15rpx;
					width: 25rpx;
					height: 15rpx;
				}
			}

			.select-box {
				margin: 40rpx 0 70rpx;

				.select-l {
					color: #FFFFFF99;
					font-size: 24rpx;
					.cai-ji {
						transition: all .5s;
						margin-left: 15rpx;
						width: 25rpx;
						height: 15rpx;
					}
				}

				.select-r {
					color: #FFFFFF99;
					font-size: 24rpx;
				}

				.sort-icon {
					width: 20rpx;
					height: 32rpx;
					margin-left: 6rpx;
				}
			}

			.content-box {
				margin-bottom: 40rpx;

				.time {
					margin-top: 15rpx;
					font-size: 24rpx;
					color: #6e6e76;
				}

				.longdan-box {
					width: 80rpx;
					height: 80rpx;
					margin-right: 24rpx;
				}

				.longdan {
					width: 80rpx;
					height: 80rpx;
					border-radius: 8rpx;
				}
			}

			.title {
				// margin-bottom: 23rpx;
				font-size: 28rpx;

				.kuangshi-icon {
					margin-right: 4rpx;
					width: 64rpx;
					height: 31rpx;
				}
			}
		}

		.no-data-box {

			position: fixed;
			top: 40%;
			left: 50%;
			transform: translate(-50%, -50%);
			color: #FFFFFFCC;
			font-size: 28rpx;

		}

		.no-data {
			width: 220rpx;
			height: 220rpx;
			margin-bottom: 30rpx;
		}

		.center-slot {
			color: #FFF;

			.search-icon {
				width: 48rpx;
				height: 48rpx;
			}
		}

	}



	.top-box {
		width: 100%;
		position: relative;
		margin: 83rpx auto 26rpx;
		padding: 26rpx 32rpx;
		border-radius: 16rpx;

		.long-baby {
			position: absolute;
			top: 40rpx;
			right: 0;
			width: 96rpx;
			height: 96rpx;
		}

		.my-qing-long {
			color: #FFFFFFCC;
			font-size: 24rpx;

			.unit {
				margin-left: 15rpx;
			}
		}

		.long-num {
			margin: 20rpx 0 26rpx;
			font-size: 80rpx;
			color: #27ff92;


		}
	}

	.popup-one-box {
		position: relative;
		z-index: 7;
		width: 560rpx;
		border-radius: 16rpx;
		background: linear-gradient(181deg, rgba(35, 52, 73, .94) 20%, #181922 100%);
		padding: 90rpx 40rpx 40rpx;

		.has-shuijing {
			width: 100%;
			height: 44rpx;
			font-size: 28rpx;
			color: #FFFFFF99;
			margin-bottom: 24rpx;
		}

		.shui-ji-num {
			font-size: 28rpx;
			color: #FFF;
			font-weight: 700;
		}

		.popup-box-btn {
			width: 480rpx;
			height: 90rpx;
			background: #8e929b;
			color: #202426;
			font-size: 30rpx;
			border-radius: 8rpx;
			font-weight: 700;
		}

		.popup-box-cancel {
			position: absolute;
			left: 50%;
			transform: translate(-50%, 0);
			bottom: -120rpx;
		}

		.close-popup {
			width: 48rpx;
			height: 48rpx;
		}

		.popup-kuangshi {
			width: 56rpx;
			height: 36rpx;
		}

		.need-kuang {
			width: 480rpx;
			height: 120rpx;
			background: rgba(46, 70, 86, .41);
			border-radius: 8rpx;
			padding: 0 20rpx;
			margin-bottom: 40rpx;

			.need-shuijing {
				font-size: 22rpx;
				color: #FFFFFF99;
			}

			.need-shuijing-num {
				font-size: 28rpx;
				font-weight: 700;
				color: #FFF;
			}
		}

		.popup-top-bg {
			position: absolute;
			width: 100%;
			left: 0;
			top: 0;
			right: 0;
			z-index: -1;
			height: 108rpx;
		}

		.popup-top-gaoji {
			position: absolute;
			top: 40rpx;
			right: 30rpx;

			.gao-ji {
				width: 156rpx;
				height: 35rpx;
			}
		}

	}
</style>